<template>
  <div class="GoTop"  @click="goTop" v-show="goTopShow">

  </div>
</template>

<script>
export default {
    name:'index',
  data(){
      return {
    goTopShow:false
      }
  },

    methods:{
        //判断当前是否隐藏或显示GoTop按钮
      handleScroll () {
        this.scrollTop = window.pageY || document.documentElement.scrollTop || document.body.scrollTop
        if(this.scrollTop>=30){
          this.goTopShow=true
        }else {
          this.goTopShow=false
        }

      },
      goTop(){
        let timer=null,_that=this;
        cancelAnimationFrame(timer)
        timer=requestAnimationFrame(function fn(){
          if(_that.scrollTop>0){
            _that.scrollTop=0;
            document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
            timer=requestAnimationFrame(fn)
          }else {
            cancelAnimationFrame(timer);
            _that.goTopShow=false;
          }
        })
      }
        //返回顶部
    },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  destroyed(){
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style scoped lang="less" >
    .GoTop{
        //display: none;
        position: fixed;
        text-indent: -9999px;
        left: 50%;
        margin-left: 500px;
        bottom: 160px;
        width: 49px;
        height: 44px;
        background-position: -265px -47px;
        z-index: 0;
        background: url('../../assets/sprite.png') no-repeat -265px -47px;

        &:hover{
            background-position: -325px -47px;
            cursor: pointer;
        }
    }
</style>